<template>
  <div>
    <!-- 为了不执行两次设置immediate-check -->
    <!-- offset是触发距离 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了"  @load="onLoad"
        :immediate-check="false">
        <ArticleItem v-for="item in articleList" :key="item.art_id" :obj="item" @click.native="jump(item.art_id)" />
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  props: {
    listid: Number
  },
  async created () {
    this.timestamp = this.$utils.timestamp()
    // 根据时间戳切换页数
    this.getData(false)
  },
  data () {
    return {
      articleList: [],
      loading: false,
      finished: false,
      count: 0,
      isLoading: false,
      timestamp: ''
    }
  },
  components: {
    ArticleItem: () => import('../../../components/ArticleItem.vue')
  },
  methods: {
    onLoad () {
      if (this.articleList.length === 0) { // 数组为空的时候控制不触发
        this.loading = false
      } else {
        this.getData(false)
      }
    },
    onRefresh () {
      this.timestamp = this.$utils.timestamp()
      this.getData(true)
    },
    async getData (e) {
      const { data: res } = await this.$api.getArticles({ channel_id: this.listid, timestamp: this.timestamp })
      if (e === true) {
        this.articleList = []
      }
      if (res.data.pre_timestamp === null) {
        this.finished = true
      }
      this.isLoading = false
      // 拼接新旧数据
      this.articleList = [...this.articleList, ...res.data.results]
      this.timestamp = res.data.pre_timestamp
      this.loading = false
    },
    jump (e) {
      this.$router.push({
        path: `/ArticleDetail?art_id=${e}`
      })
    }
  }
}
</script>

<style>
</style>
